<template>
  <view class="box">
    <view class="search_box">
      <input type="text" v-model="value" @input="inputValue" placeholder="请输入搜索商品" />
      <view v-if="value" @click="clearValue" class="btn">清空</view>
    </view>
    <view class="list">
      <view class="item" @click="navigatorTo(item.goods_id)" v-for="item in list" :key="item.goods_id">
        <view>{{item.goods_name}}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      list: [],
      timer: null,
    }
  },
  onLoad() {},
  methods: {
    inputValue() {
      console.log(11)
      // console.log(e)
      // this.value = e.detail.value
      // return false3
      // console.log(21313514654654)
      if (this.value.trim().length == 0) {
        return (this.list = [])
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        let res = await this.request({
          url: '/goods/search',
          data: { query: this.value },
        })
        // console.log(res)
        this.list = res.goods
      }, 500)
    },
    clearValue() {
      this.value = ''
      this.list = []
    },
    navigatorTo(id){
      uni.navigateTo({
         url: '/pages/detail/index?id='+id
      });
      this.value=""
      this.list=[]
    }
  },
}
</script>
<style lang="scss">
.box {
  background: #dddddd;
  min-height: 100vh;
  padding: 30rpx;
}
.search_box {
  padding: 0 0 40rpx 0;
  // height: 80rpx;
  display: flex;
  input {
    flex: 1;
    height: 60rpx;
    background: #fff;
    border-radius: 10rpx;
    padding: 0 30rpx;
  }
  .btn {
    margin-left: 20rpx;
    height: 60rpx;
    width: 100rpx;
    line-height: 60rpx;
    text-align: center;
    background: #f7f7f7;
    border-radius: 10rpx;
  }
}
.list {
  .item {
    border-bottom: 1px solid #dcdcdc;
    background: #fff;
    height: 70rpx;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    // align-items: center;
    padding: 10rpx 10rpx;
    // width: 100rpx;

    view {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>